<template>
	<view style="padding: 0.5rem;">
		<div
			style="width: 80%; display: inline-flex; flex-direction: row; align-items: flex-start; justify-content: flex-start;">
			<!-- <div style="width: 4rem; height: 7rem;">
				<img style="width: 4rem; height: 4rem; border-radius: 8px;" :src="src" />
			</div> -->
			<div style="width: 1rem;"></div>
			<div
				style=" width: 100%;  display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;">
				<!-- <div style=" height: 0.1rem;"></div> -->
				<div
					style=" width: 100%;display: inline-flex; flex-direction: row; align-items: flex-start; justify-content: flex-start;">
					<div
						style=" width: 100%;display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: flex-start;">
						<p
							style="width: 100%; font-size: 16px; font-weight: 500; line-height: 24px; color: rgba(33, 33, 33, 1);">
							{{name}}
						</p>
						<div style="height: 1px;"></div>
						<div style="display: flex;width: 100%; justify-content: space-between;">
							<p
								style="width: 100%; font-size: 16px; font-weight: 500; line-height: 24px; color: rgba(33, 33, 33, 1);">
								¥{{price}}</p>
							<uni-number-box @change="changeValue" :value="num" />
						</div>

						<!-- 	<div style="height: 1px;"></div>
						<p style="width: 100%; font-size: 12px; line-height: 16px; color: rgba(158, 158, 158, 1);">
							{{detail}}</p> -->
					</div>
					<div style="width: 8px;"></div>
					<!-- <img style="width: 24px; height: 24px; border-radius: 8px;" src="https://via.placeholder.com/24x24" /> -->
				</div>
				<!-- <div style="height: 19px;"></div> -->

			</div>
			<!-- <view class="short-line"></view> -->
		</div>
		<!-- <view class="short-line"></view> -->
		<div style="height:0.5rem;"></div>
		<view class="short-line"></view>
	</view>
</template>

<script>
	export default {
		name: "bag-item",
		props: {
			id: {
				type: Number,
				required: false,
			},
			name: {
				type: String,
				default: "商品名称",
				required: false,
			},
			src: {
				type: String,
				default: "../../static/images/qs_goods.png",
				required: false,
			},
			price: {
				type: Number,
				default: 0,
				required: false,
			},
			num: {
				type: Number,
				default: 0,
				required: false,
			},
			detail: {
				type: String,
				default: "这里是当前商品的介绍",
				required: false,
			},
		},
		data() {
			return {

			};
		},
		methods: {
			changeValue(e) {
		 
				this.$emit('update:num', e)
				if (e <= 0) {
					console.log("zizujian")
					this.$emit('child-event', this.id);
				}
				 this.$emit('child-event2')
			},
		},
	}
</script>

<style lang="scss">
	.short-line {
		border-top: 1px solid $uni-text-color-disable ;
		/* 1像素的黑色横线 */
		width: 100%;
		height: 0;
		/* 确保线条不占据空间 */
		// margin-top: 0.2rem;
	}
</style>